<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
<script src="${path}/resources/dist/js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
<script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<html>
<head>
    <title>$Title$</title>
</head>
<style>
    #app {
        width: 600px;
        margin: 0px auto;
    }
</style>
<body>
<div id="app">
    <div>
        <template>
        <el-form :model="selectPermissions">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="selectPermissions.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="selectPermissions.pwd" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="角色类型" :label-width="formLabelWidth">
                <el-select v-model="selectPermissions.roleid" placeholder="请选择" @focus="roleTypeChange" @change="roleChecked()">

                    <el-option
                            v-for="item in roleTypeSelect"
                            :key="item.rid"
                            :label="item.rolename"
                            :value="item.rid">
                    </el-option>
                    <el-option label="新建角色" value="-1"></el-option>
                </el-select>
            </el-form-item  >
            <el-form-item v-if="selectPermissions.roleid==-1" label="请输入角色名" :label-width="formLabelWidth">
                <el-input  placeholder="请输入角色名" :label-width="formLabelWidth" v-model="selectPermissions.newRoleName"></el-input>
            </el-form-item>
            <el-form-item label="账号状态" :label-width="formLabelWidth">
                <el-select v-model="selectPermissions.state" placeholder="请选择">
                    <el-option label="有效" value=1></el-option>
                    <el-option label="无效" value=0></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合作公司" :label-width="formLabelWidth">
                <el-input placeholder="合作公司" v-model="selectPermissions.GTZ"></el-input>
            </el-form-item>
            <el-form-item label="权限树" :label-width="formLabelWidth">
            <el-tree
                    :data="menuList"
                    show-checkbox
                    default-expand-all
                    node-key="mid"
                    ref="tree"
                    highlight-current
                    :filter-node-method="filterNode"
                    :props="po">
            </el-tree>
            </el-form-item>
            <el-form-item label="反馈" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="selectPermissions.notes">
                </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth">
                <el-button size="small" type="primary" @click="treeSubmit">提交</el-button>
                <el-button size="small" type="primary" @click="back">返回</el-button>
            </el-form-item>
        </el-form>
        </template>
    </div>

</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            formLabelWidth: "150px",
            menuList: [],
            po: {
                id: "parent_id",
                label: "menu_name",
                children: "sonList",
            },
            roleTypeSelect: [],
            selectPermissions: [],

        },
        methods: {
            treeSubmit() {
                vm.selectPermissions.treeData = this.$refs.tree.getCheckedKeys();
                console.log(vm.selectPermissions.treeData);
                vm.selectPermissions.treeData = window.JSON.stringify(vm.selectPermissions.treeData);
                let data = window.Qs.stringify(vm.selectPermissions);
                axios.post("${path}/tree.do?method=addTree", data).then(response => {
                    if (response.data==true){
                        this.$notify({
                            title: '添加成功',
                            type: 'success'
                        });

                    }else {
                        this.$notify.error({
                            title: '添加失败',
                        });
                    }
                });
            },
            roleTypeChange() {
                axios.post("${path}/superSu.do?method=showRole").then(response => {
                    vm.roleTypeSelect = response.data;
                });
            },
            roleChecked() {
                if (vm.selectPermissions.roleid==-1){
                    this.menuList = ${sessionScope.menus}
                    this.$refs.tree.setCheckedKeys([]);
                }else {
                    axios.post("${path}/tree.do?method=TreeChecked" + "&roleid=" + vm.selectPermissions.roleid).then(response => {
                        this.$refs.tree.setCheckedKeys(response.data);
                        this.$refs.tree.setCheckedNodes(response.data);
                        this.$refs.tree.filter(response.data);

                    });
                    for(var i = 0; i < this.menuList.length; i++) {    // 这个循环可以封装一下
                        var children = this.menuList[i].sonList
                        if (children != undefined) {
                            for(var g = 0; g< children.length; g++) {
                                children[g].disabled = true
                            }
                        }
                        this.menuList[i].disabled = true
                    }
                }

            },
            filterNode(value, data) {
                let z = false;
                value.forEach(obj => {
                    if (obj == data.mid) {
                        z =  true;
                    }
                });
                return z;
            },
            back(){
                location.href="/page/userinfo/showAllUserinfo.jsp"
            }
        },
        mounted() {
            this.menuList = ${sessionScope.menus}
        }
    });
</script>
</body>
</html>
